<template>
  <div>
    <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
      <h4>有 Header</h4>
      <TCard icon="i-ion:bar-chart" title="Statistics" action="详情">
        <p>内容内容内容内容内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容</p>
        <p class="mb-0">
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
      </TCard>
    </div>

    <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
      <h4>没有 Header</h4>
      <TCard>
        <p>内容内容内容内容内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容</p>
        <p class="mb-0">
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
      </TCard>

      <h4 class="my-4">
        还可通过 class 的 card-shadow 实现卡片阴影
      </h4>
      <div class="card-shadow rounded-2 bg-sys-layer-a p-4">
        <p>内容内容内容内容内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容</p>
        <p class="mb-0">
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
      </div>
    </div>

    <div class="items-start gap-3 rounded-xl bg-white/7 p-4">
      <h4>自定义 Header</h4>
      <TCard>
        <template #header>
          <div class="text-xl text-amber font-bold">
            自定义 Header
          </div>
          <ASelect class="ml-auto w-30" placeholder="请选择">
            <ASelectOption value="1">
              选项 1
            </ASelectOption>
            <ASelectOption value="2">
              选项 2
            </ASelectOption>
          </ASelect>
        </template>

        <template #default>
          <p>内容内容内容内容内容内容内容内容内容内容</p>
          <p>内容内容内容内容内容</p>
          <p class="mb-0">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
          </p>
        </template>
      </TCard>
    </div>
  </div>
</template>
